<!-- 注册弹窗 -->
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.register-modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  .register-top {
    width: 90%;
    height: .4267rem;
    margin: 0 auto;
    margin-top: .5rem;
    @include flex-space-between-center;
    margin-bottom: 20px;
    color: $color-gray;

    span {
      font-size: .4733rem;
    }

    p {
      font-size: .4267rem;
    }
  }

  .register-center {
    width: 80%;
    height: 7rem;
    margin: 0 auto;
    margin-top: 2rem;

    h4 {
      font-size: .6rem;
      font-weight: $font-weight-500;
      margin-bottom: 20px;
    }

    .register-email,
    .register-password {
      width: 90%;
      height: 1.2rem;
      margin-bottom: .5333rem;
      padding-left: .2667rem;
      font-size: .3733rem;
      background: rgba(238, 238, 238, 0.36);
      @include border-0;
    }

    .inputbtn {
      width: 90%;
      height: 1.2rem;
      margin-bottom: .5333rem;
      padding-right: .2667rem;
      font-size: .3733rem;
      background: rgba(238, 238, 238, 0.36);
      @include border-0;
      display: flex;

      input {
        width: 70%;
        height: 1.2rem;
        padding-left: .2667rem;
        font-size: .3733rem;
        background: rgba(238, 238, 238, 0.36);
        @include border-0;
      }

      button {
        width: 30%;
        height: 1.2rem;
        font-size: .3733rem;
        background: rgba(238, 238, 238, 0.36);
        @include border-0;
        color: $color-login-btn;
        font-weight: $font-weight-500;
      }
    }

    input:focus {
      outline: none;
    }

    p {
      font-size: .3267rem;
      color: $color-login-btn;
    }

    .register-btn {
      width: 95%;
      height: 1.2rem;
      margin: 0 auto;
      margin-top: 1rem;
      font-size: .4733rem;
      color: #fff;
      background-color: $color-login-btn-red;
      @include border-0;
      border-radius: $border-radius-5px;
    }
  }
}

@keyframes register-modal-fade-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.register-modal-enter-active {
  animation: register-modal-fade-in 0.3s ease-in-out;
}

@keyframes register-modal-fade-out {
  from {
    // opacity: 1;
    transform: translateX(0);
  }

  to {
    // opacity: 0;
    transform: translateX(100%);
  }
}

.register-modal-leave-active {
  animation: register-modal-fade-out 0.3s ease-in-out;
}
</style>
<template>
  <Transition name="register-modal">
    <teleport to="body" v-if="registerStore.showRegisterModal">
      <div class="register-modal">
        <div class="register-top">
          <span @click="registerStore.hideRegister"><i class="iconfont icon-fanhui"></i></span>
          <p></p>
        </div>
        <div class="register-center">
          <h4>注册后即可展示自己</h4>
          <input type="text" name="" id="" placeholder="输入邮箱" class="register-email" v-model="formData.email">
          <input type="password" name="" id="" placeholder="输入密码" class="register-password" v-model="formData.password">
          <div class="inputbtn">
            <input type="text" name="" id="" placeholder="输入邮箱验证码" class="register-verify" v-model="formData.code">
            <button @click="getVerifyCode">获取验证码</button>
          </div>
          <button class="register-btn" @click="register">注册</button>
        </div>
      </div>
    </teleport>
  </Transition>
</template>
<script setup>
import { useRegisterStore } from '@/store/modules/login/Register'
import { getVerifyCodeApi, registerApi } from '@/api/login/register'
const registerStore = useRegisterStore()
const formData = reactive({
  email: '',
  password: '',
  code: ''
})
const getVerifyCode = async () => {
  if (!formData.email) {
    ElMessage.error('请输入邮箱');
    return;
  }
  try {
    const res = await getVerifyCodeApi(formData.email);
    if (res.code === 200) {
      console.log(res);
    }
  } catch (error) {
  }
}

const register = async () => {
  if (!formData.email || !formData.password || !formData.code) {
    return;
  }
  try {
    const res = await registerApi(formData);
    if (res.code === 200) {
      console.log(res);
      registerStore.hideRegister();
    }
  } catch (error) {
  }
}
</script>